<template>
	<u-popup round="18" :show="tipshow" mode="center">
		<view class="popup-model-wrapper">
			<div class="title">
				<image v-if="image==='success'" class="image" src="/static/icon-success.png"></image>
				<image v-if="image==='warn'" class="image" src="/static/icon-warning-orange.png"></image>
				<div class="text">{{title}}</div>
			</div>
			<div class="content" v-if="type==='input'">
				<input class="input" type="text" maxlength="20" v-model="inputText" :placeholder="placeholder" />
			</div>
			<div class="content" v-else>
				{{subTitle}}
			</div>
			<div class="operate-wrapper" :class="{'two':type==='alert'}">
				<button border="bottom" v-if="type==='alert'" class="button del" @click="tipshow=false">取消</button>
				<button border="bottom" class="button confirm" @click="popupConfirm">{{confirmText}}</button>
			</div>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			type: { // 当前角色
				type: String,
				default: 'confirm'
			},
			title: { // 当前选中的tab index
				type: String,
				default: ''
			},
			placeholder: { // 当前选中的tab index
				type: String,
				default: ''
			},
			subTitle: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			image: {
				type: String,
				default: 'success'
			}
		},
		data() {
			return {
				tipshow: false,
				inputText: ''
			}
		},
		methods: {
			popupConfirm() {
				this.tipshow = false
				if (this.type === 'input') {
					this.$emit("popupConfirm", this.inputText)
				} else {
					this.$emit("popupConfirm")
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup-model-wrapper {
		width: 420upx;
		border-radius: 30upx;
		padding: 40upx;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.image {
				margin-right: 24upx;
				width: 52upx;
				height: 52upx;
			}

			.text {
				font-size: 34upx;
				color: #000000CC;
			}
		}

		.content {
			margin-top: 50upx;
			color: #666666FF;
			font-size: 26upx;
			padding: 12upx 0;

			.input {
				padding: 12upx;
				font-size: 26upx;
				border-bottom: 2upx solid #f4f4f4;
			}
		}

		.operate-wrapper {
			margin-top: 56upx;
			display: flex;
			justify-content: space-around;

			.button {
				width: 320upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 28upx;
				border-radius: 4upx
			}

			.del {
				background: #EBEDF0FF;
				color: #BFBEBEFF;
			}

			.confirm {
				background: #61D7CAFF;
				color: #FFFFFFFF;
			}

			&.two {
				.button {
					width: 160upx;
				}
			}
		}
	}
</style>
